<template>
  <div class="menu-container">
    <!-- 选单部分 -->
    <div class="menu">
      <div class="menu-tile">
        热门职业检索
      </div>
      <div
          v-for="(item, index) in menuData"
          :key="index"
          class="menu-item"
          @mouseover="setActiveMenuIndex(index)"
          :class="{ 'active': activeMenuIndex === index }"
      >
        {{ item.title }}
        <span :style="arrowColors[index]">▸</span>
      </div>
    </div>

    <!-- 侧面内容部分 -->
    <div class="side-menu" v-if="activeMenu">
      <div class="side-menu-content">
        <div class="side-menu-separator">
          <h3>{{ activeMenu.title }}</h3>
          <div v-for="(child, idx) in activeMenu.children" :key="idx" class="side-menu-section">
            <div class="side-menu-header">
              {{ child.subtitle }}
            </div>
            <div class="side-menu-items">
              <ul>
                <li v-for="(subItem, subIdx) in child.children" :key="subIdx" @click="onSearch(subItem.name)">
                  {{ subItem.name }}
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuData: [
        {
          title: '游戏',
          children: [
            {
              subtitle: '游戏开发', children: [
                {name: '程序员'},
                {name: '游戏美术'},
                {name: '平衡策划'},
                {name: '动作策划'}
              ]
            },
            {
              subtitle: '游戏运营', children: [
                {name: '平衡策划'},
                {name: '社区管理'},
                {name: '数据分析师'}
              ]
            }
          ]
        },
        {
          title: '互联网',
          children: [
            {
              subtitle: '前端开发', children: [
                {name: '前端开发工程师'},
                {name: '移动端开发工程师'},
              ]
            },
            {
              subtitle: '后端开发', children: [
                {name: 'Java开发工程师'},
                {name: 'C#开发工程师'},
                {name: 'C++开发工程师'},
              ]
            },
            {
              subtitle: '数据科学', children: [
                {name: '数据分析'},
                {name: '机器学习'},
                {name: '深度学习'},
                {name: '数据挖掘'},
              ]
            },
            {
              subtitle: 'UI/UX设计', children: [
                {name: 'UI设计师'},
                {name: 'UX设计师'},
                {name: '交互设计'},
                {name: '用户研究'}
              ]
            }
          ]
        },
        {
          title: '餐饮',
          children: [
            {
              subtitle: '餐厅管理', children: [
                {name: '餐厅经理'},
                {name: '餐厅服务员'},
                {name: '迎宾员'},
                {name: '厨房主管'}
              ]
            },
            {
              subtitle: '厨师', children: [
                {name: '厨师'},
                {name: '西餐厨师'},
                {name: '糕点师'}
              ]
            },
            {
              subtitle: '食品安全', children: [
                {name: '食品安全员'},
                {name: '质量检测员'}
              ]
            }
          ]
        },
        {
          title: '医疗',
          children: [
            {
              subtitle: '医生', children: [
                {name: '外科医生'},
                {name: '内科医生'},
                {name: '生物信息学分析师'}
              ]
            },
            {
              subtitle: '医药研发', children: [
                {name: '药物研发专家'},
                {name: '临床研究员'},
                {name: '药品注册专员'}
              ]
            },
            {
              subtitle: '医疗器械', children: [
                {name: '医疗器械工程师'},
                {name: '医疗设备维护技术员'}
              ]
            }
          ]
        },
        {
          title: '传媒',
          children: [
            {
              subtitle: '内容创作', children: [
                {name: '网络主播'},
                {name: '个人练习生'},
                {name: '视频剪辑'}
              ]
            },
            {
              subtitle: '市场营销', children: [
                {name: '市场经理'},
                {name: '品牌经理'},
                {name: '数字营销专员'}
              ]
            },
            {
              subtitle: '媒体策划', children: [
                {name: '媒体策划师'},
                {name: '广告策划师'}
              ]
            }
          ]
        },
        {
          title: '金融',
          children: [
            {
              subtitle: '金融分析', children: [
                {name: '金融分析师'},
                {name: '风险管理专家'},
                {name: '投资顾问'}
              ]
            },
            {
              subtitle: '投资银行', children: [
                {name: '投资银行分析师'},
                {name: '并购顾问'}
              ]
            },
            {
              subtitle: '财务管理', children: [
                {name: '财务经理'},
                {name: '审计师'},
                {name: '税务专员'}
              ]
            }
          ]
        },
        {
          title: '汽车',
          children: [
            {
              subtitle: '汽车维修', children: [
                {name: '汽车维修技师'},
                {name: '汽车诊断师'},
                {name: '车身维修工'}
              ]
            },
            {
              subtitle: '汽车销售', children: [
                {name: '汽车销售专员'},
                {name: '前台接待'},
                {name: '汽车市场推广专员'}
              ]
            }
          ]
        }
      ],
      activeMenu: null,
      arrowColors: [],
      activeMenuIndex: null
    };
  },
  methods: {
    setActiveMenuIndex(index) {
      this.activeMenuIndex = index;
      this.activeMenu = this.menuData[index];
      this.arrowColors = this.arrowColors.map((color, idx) => idx === index ? {color: '#40ffe2'} : {
        color: 'grey',
        margin: '5px'
      });
    },
    onSearch(keyword) {
      this.$emit('search', keyword);
    }
  },
  mounted() {
    this.arrowColors = this.menuData.map(() => ({color: 'grey', margin: '5px'}));
  }
};
</script>

<style scoped>
.menu-container {
  display: flex;
  margin-top: 30px;
  margin-left: 320px;
}

.menu {
  width: 250px;
  height: 500px;
  margin-right: 5px;
  border-right: 1px solid #ccc;
  background-color: white;
  border-radius: 10px;
}

.menu-tile {
  padding: 10px;
  margin: 10px;
  font-weight: bold;
}

.menu-item {
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: box-shadow 0.3s ease; /* Smooth transition for shadow */
}

.menu-item.active {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect on active */
}

.side-menu {
  width: 700px;
  height: 500px;
  background-color: white;
  border-radius: 10px;
}

.side-menu-content {
  display: grid;
  grid-template-columns: 1fr; /* Single column layout */
  gap: 20px;
}

.side-menu-separator {
  display: flex;
  flex-direction: column;
}

.side-menu-section {
  display: flex;
  align-items: flex-start;
  border-bottom: 1.5px solid #ccc; /* Optional: Adds a horizontal divider between sections */
  padding-bottom: 10px;
  padding-top: 10px;
}

.side-menu-header {
  padding: 5px 40px;
  color: #666;
}

.side-menu-items ul {
  list-style-type: none;
  display: flex;
  flex-flow: row wrap;
  padding: 0;
  margin: 0;
}

.side-menu-items li {
  padding: 3px 15px;
  border-left: 1.5px solid #ccc;
  margin-bottom: 5px;
  margin-top: 5px;
}

.side-menu-items li:last-child {
  border-right: 1.5px solid #ccc;
}

.side-menu-items li:hover {
  color: #0e6fd8;
  cursor: pointer;
}

.side-menu a {
  text-decoration: none;
  color: #333;
}

.side-menu a:hover {
  color: #0e6fd8;
}

.side-menu h3 {
  margin-bottom: 15px;
  margin-top: 15px;
  font-size: 18px;
}
</style>